<template>
	<view class="swiper-container">
		<swiper :autoplay="autoplay" :interval="interval" :duration="duration" indicator-dots="true" circular="true">
			<swiper-item v-for="(image, index) in images" :key="index">
				<image :src="image" class="swiper-image" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	</view>
	<!-- 医院医生数据 -->
	<view class="recommended-products">
		<view v-for="(item, index) in cardItems" :key="index" class="product-item">
			<image :src="item.avatar" class="product-avatar"></image>
			<text class="product-name">{{ item.name }}</text>
			<text class="product-position">{{ item.position }}</text>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request.js'
	import {
		getDoctorApi
	} from '@/utils/api/reserve';
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'

	onShow(() => {
		console.log("home页面加载")
		load()
	})

	// 定义轮播图的相关属性  
	const autoplay = ref(true);
	const interval = ref(3000); // 自动切换时间间隔，单位为毫秒
	const duration = ref(500); // 滑动动画时长，单位为毫秒
	const images = ref([
		'https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF',
		'https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF',
		'https://t7.baidu.com/it/u=2529476510,3041785782&fm=193&f=GIF'
	]);

	// 医生数据  
	const cardItems = reactive([])

	const load = () => {
		try {
			getDoctorApi().then(res => {
				for (var i = 0; i < res.data.list.length; i++) {
					cardItems.push(res.data.list[i]);
				}
			})
		} catch (error) {
			console.error('请求失败：', error.message);
		}
	}

</script>

<style>
	.home-page {
		padding: 20px;
	}

	.swiper-container {
		width: 100%;
		height: auto;
		/* 根据需要调整高度 */
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.category-container {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20px;
	}

	.category-item {
		width: 48%;
		/* 根据需要调整宽度 */
		margin: 1%;
		padding: 10px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.category-icon {
		width: 60px;
		height: 60px;
	}

	.category-name {
		margin-top: 10px;
		font-size: 16px;
		text-align: center;
	}

	.recommended-products {
		margin-top: 20px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
	}

	.product-item {
		width: 48%;
		/* 根据需要调整宽度 */
		margin: 1%;
		padding: 10px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.product-image {
		width: 100%;
		height: 150px;
		/* 根据需要调整高度 */
		object-fit: cover;
	}

	.product-name {
		margin-top: 10px;
		font-size: 16px;
		text-align: center;
	}

	.product-price {
		margin-top: 5px;
		font-size: 14px;
		color: #f56c6c;
		text-align: center;
	}
</style>